<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>监控中心 - 仓库管理</title>

    <!-- Bootstrap Core CSS -->
    <link href="${request.getContextPath()}/public/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${request.getContextPath()}/public/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${request.getContextPath()}/public/dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${request.getContextPath()}/public/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <link href="${request.getContextPath()}/public/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <!--嵌入头部跟菜单-->
        <#include "/admin/inc/menu.html"/>

        <!-- Page Content -->
        <div id="page-wrapper">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-10">
                        <h4 class="page-header">新增仓单 —— 仓库名称：${warehouse.name}</h4>
                    </div>
                </div>
        <!-- /.row -->
                <div class="row">
                    <div class="col-lg-4">
                        <form id="myform" role="form" method="post" action="${request.getContextPath()}/admin/receipt/submitAdd.do" onsubmit="return checkFormValue(this)">
                            <input type="hidden" name="warehouseId" value="${warehouse.id}">
                            <input type="hidden" id="joinTime" name="joinTime" value="">
                            <div class="form-group">
                                <label>仓单编号</label>
                                <input class="form-control" name="no" type="text" required autofocus>
                            </div>

                            <div class="form-group">
                                <label>入库日期</label>
                                <input id="input_join_time" data-date-format="yyyy-mm-dd" data-link-field="joinTime" data-link-format="yyyy-mm-dd" class="form-control" type="text" value="" required>
                            </div>

                            <div class="form-group">
                                <label>货主名称</label>
                                <input class="form-control" name="ownerName" type="text" required>
                            </div>

                            <div class="form-group">
                                <label>品种</label>
                                <input class="form-control" name="breed" type="text" required>
                            </div>

                            <div class="form-group">
                                <label>属性</label>
                                <input class="form-control" name="attribute" type="text" required>
                            </div>

                            <div class="form-group">
                                <label>总重量</label>
                                <input class="form-control" name="goodsWeight" type="text" required>
                            </div>

                            <div class="form-group">
                                <label>重量单位</label>
                                <select class="form-control" name="weightType">
                                    <option value="0">吨</option>
                                    <option value="1">千克</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label>总数量</label>
                                <input class="form-control" name="goodsQuantity" type="text" required>
                            </div>

                            <div class="form-group">
                                <label>数量单位</label>
                                <select class="form-control" name="quantityType">
                                    <option value="0">捆</option>
                                    <option value="1">包</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label>库位</label>
                                <input class="form-control" name="location" type="text" required>
                            </div>

                            <button type="submit" class="btn btn-primary">提交</button>
                            <a href="${request.getContextPath()}/admin/receipt/listByWh.do?whId=${warehouse.id}" class="btn btn-warning " id="reset">取消</a>
                        </form>
                    </div>

                    <div class="col-lg-1"></div>

                    <div class="col-lg-6">

                        <div class="panel panel-default">
                            <div class="panel-heading">

                                <div class="row">
                                    <div class="col-lg-4"><h5>仓单关联摄像头</h5></div>
                                    <div class="col-lg-6"><button class="btn btn-default" data-toggle="modal" data-target="#cameraModal">选择摄像头</button></div>
                                </div>

                            </div>
                            <div class="panel-body">
                                <div class="row" id="panel-cameras">

                                    <!--<div class="col-lg-4">-->
                                        <!--<div class="panel panel-default">-->
                                            <!--<div class="panel-body">-->
                                                <!--<a href="#"> <img  class="img-responsive" src="http://localhost:8080/vmc/public/images/default.png"></a>-->
                                            <!--</div>-->
                                            <!--<div class="panel-footer">-->
                                                <!--<div class="row">-->
                                                    <!--<div class="col-lg-9"><h5>K1仓库A区01</h5></div>-->
                                                    <!--<div class="col-lg-2"><a href="#"> <li class="fa fa-times" style="margin-top: 10px"></li> </a></div>-->
                                                <!--</div>-->
                                            <!--</div>-->
                                        <!--</div>-->
                                    <!--</div>-->

                                </div>
                            </div>

                        </div>

                        <!--end 摄像头设置-->

                        <div class="panel panel-default">
                            <div class="panel-heading">

                                <div class="row">
                                    <div class="col-lg-4"><h5>仓单关联RFID</h5></div>
                                    <div class="col-lg-6"><button class="btn btn-default" data-toggle="modal" data-target="#tagModal">选择RFID</button></div>
                                </div>

                            </div>
                            <div class="panel-body" id="panel-tags">

                                <!--<div class="row">-->
                                    <!--<div class="col-lg-3">-->
                                        <!--<button class="btn btn-default">0300000A <li class="fa fa-times"></li> </button>-->
                                    <!--</div>-->
                                    <!--<div class="col-lg-6">-->
                                        <!--<h5>抓拍摄像头：K1仓库A区01</h5>-->
                                        <!--<hr color="#ff0000">-->
                                    <!--</div>-->
                                    <!--<div class="col-lg-3">-->
                                        <!--<button class="btn btn-default">选择 </button>-->
                                    <!--</div>-->
                                <!--</div>-->

                            </div>

                        </div>

                        <!--end 标签设置-->

                    </div>
                </div>
        <!-- /.row -->
                
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->


    <!--摄像头选择面板-->
    <div class="modal fade" id="cameraModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="cameraModalLabel">选择摄像头</h4>
                </div>
                <div class="modal-body">
                    <!--摄像头列表-->
                    <div class="row">
                        <#if cameraList??>
                            <#list cameraList as camera>
                                <div class="col-lg-4">
                                    <div class="panel panel-default">
                                        <div class="panel-body">
                                            <a href="#"> <img  class="img-responsive" src="${camera.coverImageUrl}"></a>
                                        </div>
                                        <div class="panel-footer">
                                            <label class="checkbox-inline">
                                                <input class="camera-checkbox" type="checkbox" value="${camera.id}" data-name="${camera.name}" data-cover="${camera.coverImageUrl}">
                                                ${camera.name}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </#list>
                        </#if>
                    </div>
                    <!--end 摄像头列表-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="choiseCamera();">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>



    <!--标签选择面板-->
    <div class="modal fade" id="tagModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="tagModalLabel">选择RFID</h4>
                </div>
                <div class="modal-body">
                    <!--标签列表-->
                    <div class="row">
                        <#if tagList??>
                            <#list tagList as tag>
                                <div class="col-lg-3">
                                    <button class="btn btn-default"><label class="checkbox-inline"><input class="tag-checkbox" type="checkbox" value="${tag.no}">${tag.no}</label></button>
                                </div>
                            </#list>
                        </#if>
                    </div>
                    <!--end 标签列表-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="choiseTag();">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


    <!--标签关联摄像头选择面板-->
    <div class="modal fade" id="tagJoinCameraModal" data-joinTag="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="tagJoinCameraModallLabel">选择抓拍摄像头</h4>
                </div>
                <div class="modal-body">
                    <!--摄像头列表-->
                    <div class="row" id="join-camera-item">
                        <!--<div class="col-lg-4">-->
                            <!--<div class="panel panel-default">-->
                                <!--<div class="panel-body">-->
                                    <!--<a href="#"> <img  class="img-responsive" src="http://localhost:8080/vmc/public/images/cangku.jpg"></a>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    </div>
                    <!--end 摄像头列表-->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="choiseCamera();">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>




    <!-- jQuery -->
    <script src="${request.getContextPath()}/public/vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="${request.getContextPath()}/public/vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="${request.getContextPath()}/public/vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="${request.getContextPath()}/public/dist/js/sb-admin-2.js"></script>

    <script type="text/javascript" src="${request.getContextPath()}/public/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="${request.getContextPath()}/public/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>


    <script>

        //统计所有用户挑选的关联摄像头
        function getcameraIds(){

            var cameras = $(".camera-item");
            var cameraIds='';

            for(var i=0;i<cameras.length;i++){

                var camera = cameras[i];

                cameraIds+=$(camera).data("cameraid")+",";
            }

            if(cameraIds!="") cameraIds = cameraIds.substr(0,cameraIds.length-1);

            console.info("cameraIds:"+cameraIds);

            return cameraIds;

        }

        //统计所有用户挑选的关联标签，以及标签对应的抓拍摄像头
        function getTagNos(){

            var tags = $(".tag-item");

            var tagNos='';

            for(var j=0;j<tags.length;j++){

                var tag = tags[j];

                tagNos+="{\"no\":\""+$(tag).data("tagno")+"\",\"cameraId\":"+$(tag).data("cameraid")+"},";
            }

            if(tagNos!="") tagNos = tagNos.substr(0,tagNos.length-1);

            console.info("tagNos:"+tagNos);

            return tagNos;

        }

        //提交表单
        function checkFormValue(form){

            //收集关联摄像头编号
            var cameraIds = getcameraIds();

            //收集关联tag 编号、与 tag 关联的 摄像头编号
            var tagNos= getTagNos();

            var str = "{\"cameraIds\":["+cameraIds+"],\"tags\":["+tagNos+"]}";

            console.info("str:"+str);

            //日期格式转换
            var  d  =  new Date(Date.parse($("#joinTime").val().replace(/-/g,"/")));

            $("#joinTime").val(d);

            console.info("form attribute:"+$("#myform").serialize());

            //post 提交表单
            $.post(form.action,$("#myform").serialize()+"&jsonData="+str,function(data){

                alert(data.msg);

                form.reset();

            },"json");

            return false;
        }



        //确认选中的tag
        function choiseTag(){

            //获取用户选择
            var checkboxs = $(".tag-checkbox");

            for(var i=0;i<checkboxs.length;i++){

                var checkbox = checkboxs[i];

                //如果tag信息被选中
                if(checkbox.checked){

                    var tagNo = checkbox.value;

                    //显示标签信息到关联面板·
                    showTag(tagNo);

                    //取消选中状态
                    checkbox.checked = false;
                }
            }

            //关闭标签选择面板
            $("#tagModal").modal('hide');

        }



        //从关联面板删除标签
        function removeTag(tagNo){

            $("#tag-item-"+tagNo).remove();
        }


        //tag关联摄像头
        function joinCamera(tagNo){

            //在弹出面板上设置tag编号，然后弹出选择面板
            $("#tagJoinCameraModal").data("joinTag",tagNo).modal();
        }


        //显示标签信息到关联面板
        function showTag(tagNo){

            var html="<div id='tag-item-"+tagNo+"' class='row tag-item' data-tagno='"+tagNo+"' data-cameraid=''> "+
                    "	<div class='col-lg-3'><button class='btn btn-default' onclick='removeTag(\""+tagNo+"\");'>"+tagNo+" <li class='fa fa-times'></li> </button></div> "+
                    "	<div class='col-lg-6'><h5>抓拍摄像头：<span id='tag-item-"+tagNo+"-cameraInfo'>--</span> </h5><hr color='#ff0000'></div> "+
                    "	<div class='col-lg-3'><button class='btn btn-default' onclick='joinCamera(\""+tagNo+"\");'>选择 </button></div> "+
                    "</div> ";

            $("#panel-tags").append(html);
        }


        //检查摄像头信息是否重复添加到面板,如果重复返回true ，否则返回 false
        function checkReplay(cameraId){

            var cameras = $(".camera-item");

            for(var i=0;i<cameras.length;i++){

                var camera = cameras[i];

                if(cameraId == $(camera).data("cameraid")){

                    return true;
                }
            }

            return false;
        }


        //确认选中的摄像头
        function choiseCamera(){

             //获取用户选择
            var checkboxs = $(".camera-checkbox");

            for(var i=0;i<checkboxs.length;i++){

                var checkbox = checkboxs[i];

                //如果某摄像头信息被选中
                if(checkbox.checked){

                    var cameraId = checkbox.value;      //摄像头id
                    var cameraName = $(checkbox).data("name");  //摄像头名称
                    var camerCover = $(checkbox).data("cover"); //摄像头封面图

                    //检查重复添加
                    var replayAdd = checkReplay(cameraId);

                    if(replayAdd) continue;

                    //显示到关联面板
                    showCamera(cameraId,cameraName,camerCover);

                    //显示摄像头到标签抓拍关联面板
                    toJoinCameraItem(cameraId,cameraName,camerCover);

                    //取消选中状态
                    checkbox.checked = false;

                }
            }

            //关闭选择面板
            $("#cameraModal").modal('hide');

        }


        //确认摄像头关联到标签
        function joinToTag(dom){

            var cameraName=$(dom).data("name");

            var cameraId=$(dom).data("id");

            var tagNo = $("#tagJoinCameraModal").data("joinTag");

            //显示摄像头名称
            $("#tag-item-"+tagNo+"-cameraInfo").html(cameraName);

            //设置关联的摄像头编号
            $("#tag-item-"+tagNo).data("cameraid",cameraId);

            //关闭选择面板
            $("#tagJoinCameraModal").modal('hide');
        }

        //显示摄像头到标签抓拍关联面板
        function toJoinCameraItem(cameraId,cameraName,camerCover){

            var html="<div id='join-camera-item-"+cameraId+"' class='col-lg-4'> "+
                    "	<div class='panel panel-default'> "+
                    "		<div class='panel-body'><a href='#' onclick='joinToTag(this);' data-id='"+cameraId+"' data-name='"+cameraName+"'> <img class='img-responsive' src='"+camerCover+"'> "+cameraName+" </a></div> "+
                    "	</div> "+
                    "</div> ";

            $("#join-camera-item").append(html);

        }

        //显示摄像头信息到关联面板
        function showCamera(cameraId,cameraName,camerCover){

            var html="<div id='camera-item-"+cameraId+"' class='col-lg-4 camera-item' data-cameraid='"+cameraId+"'> "+
                    "	<div class='panel panel-default'> "+
                    "		<div class='panel-body'> "+
                    "			<a href='#'> <img  class='img-responsive' src='"+camerCover+"'></a> "+
                    "		</div> "+
                    "		<div class='panel-footer'> "+
                    "			<div class='row'> "+
                    "				<div class='col-lg-9'><h5>"+cameraName+"</h5></div> "+
                    "				<div class='col-lg-2'><button type='button' class='btn btn-warning btn-circle' onclick='removeCamera("+cameraId+");'><i class='fa fa-times'></i></button></div> "+
                    "			</div> "+
                    "		</div> "+
                    "	</div> "+
                    "</div> ";

            $("#panel-cameras").append(html);

        }


        //删除与 tag 的关联关系， 如果有
        function removeConditionForTag(cameraId){

            var tags = $(".tag-item");

            for(var j=0;j<tags.length;j++){

                var tag = tags[j];

                if(cameraId == $(tag).data("cameraid")){

                    var tagNo = $(tag).data("tagno");

                    $(tag).data("cameraid",""); //清空关联的摄像头id

                    $("#tag-item-"+tagNo+"-cameraInfo").html("--"); //清空摄像头名称
                }
            }


        }


        //从关联面板删除摄像头信息
        function removeCamera(cameraId){

            $("#camera-item-"+cameraId).remove();

            //从抓拍摄像头关联面板中删除
            $("#join-camera-item-"+cameraId).remove();

            //删除与 tag 的关联关系， 如果有
            removeConditionForTag(cameraId);
        }


        $('#input_join_time').datetimepicker({
            language:  'zh-CN',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });



    </script>



</body>

</html>
